function Page(classname, obj = {}) {
    this.obj = obj
    this.show = obj.show || function () {}
    this.default = {
        pageData: {
            total: 100,
            pageSize: 12,
        },
        symbol: {
            first: "首页",
            prev: "上一页",
            list: '',
            next: "下一页",
            last: "末页"
        }
    }
    this.setDefault()
    this.totalPage = Math.ceil(this.default.pageData.total / this.default.pageData.pageSize)
    this.currentPage = 1
    this.list = null
    this.box = document.querySelector('.' + classname)
    this.container = document.createElement('div')
    this.setStyle(this.container, {
        width: "100%",
        height: "50px",
        display: "flex",
        justifyContent: "center",
        "align-items": "center"
    })
    this.container.onmouseover = () => {
        this.container.style.cursor = "pointer"
    }
    this.container.onselectstart = () => {
        return false;
    }
    this.box.appendChild(this.container)
    this.createTag()
    this.init()
    this.skip()
    this.tabPage()
}
Page.prototype.init = function () {
    this.createPage()
    this.setDisabled()
    // this.container.children[5].value = this.currentPage
    this.show(this.currentPage)
}
Page.prototype.skip = function () {
    var input = document.createElement('input')
    input.setAttribute('type', 'number')
    this.container.appendChild(input)
    this.setStyle(input, {
        outline: 'none',
        padding: '6px',
        border: '1px solid #ccc',
        width: '46px',
        height: '32px',
        margin: "0 5px"
    })
    var btn = document.createElement('button')
    btn.innerText = 'GO';
    this.container.appendChild(btn)
    this.setStyle(btn, {
        width: '46px',
        height: '33px',
        outline: 'none',
        border: '1px solid #ccc',
        margin: '0 5px',
        "background-color": 'skyblue',
    })
    btn.onmouseover = () => {
        btn.style.cursor = "pointer"
    }
}
Page.prototype.setDisabled = function () {
    if (this.currentPage === 1) {
        this.container.children[0].style.backgroundColor = '#eee';
        this.container.children[1].style.backgroundColor = '#eee';
        this.container.children[0].setAttribute('disabled', 'true')
        this.container.children[1].setAttribute('disabled', 'true')
    } else {
        this.container.children[0].style.backgroundColor = 'transparent';
        this.container.children[1].style.backgroundColor = 'transparent';
        this.container.children[0].removeAttribute('disabled')
        this.container.children[1].removeAttribute('disabled')
    }
    if (this.currentPage === this.totalPage) {
        this.container.children[3].style.backgroundColor = '#eee';
        this.container.children[4].style.backgroundColor = '#eee';
        this.container.children[3].setAttribute('disabled', 'true')
        this.container.children[4].setAttribute('disabled', 'true')
    } else {
        this.container.children[3].style.backgroundColor = 'transparent';
        this.container.children[4].style.backgroundColor = 'transparent';
        this.container.children[3].removeAttribute('disabled')
        this.container.children[4].removeAttribute('disabled')
    }
}
Page.prototype.tabPage = function () {
    this.container.onclick = e => {
        var e = e || window.event;
        var target = e.target || e.srcElement;
        if (target.className === 'first' && target.getAttribute('disabled') !== 'true') {
            this.currentPage = 1
            this.init()
        } else if (target.className === 'prev' && target.getAttribute('disabled') !== 'true') {
            this.currentPage--
            this.init()
        } else if (target.className === 'next' && target.getAttribute('disabled') !== 'true') {
            this.currentPage++
            this.init()
        } else if (target.className === 'last' && target.getAttribute('disabled') !== 'true') {
            this.currentPage = this.totalPage
            this.init()
        } else if (target.tagName === "P" && target.innerText - 0 !== this.currentPage) {
            this.currentPage = target.innerText - 0
            this.init()
        } else if (target.tagName === 'BUTTON' && this.currentPage !== target.previousElementSibling.value - 0) {
            if (target.previousElementSibling.value - 0 >= this.totalPage) {
                target.previousElementSibling.value = this.totalPage
            }
            if (target.previousElementSibling.value - 0 <= 1) {
                target.previousElementSibling.value = 1
            }
            this.init()
        }
    }
}
Page.prototype.createP = function (start, end) {
    for (var i = start; i <= end; i++) {
        var p = document.createElement('p')
        p.innerText = i;
        this.setStyle(p, {
            margin: "5px",
            padding: "5px",
            border: "1px solid #ccc"
        })
        if (i === this.currentPage) {
            p.style.backgroundColor = 'orange';
        }
        this.list.appendChild(p)
    }
}
Page.prototype.createPage = function () {
    this.list.innerHTML = '';
    if (this.totalPage <= 5) {
        this.createP(1, this.totalPage)
    } else {
        if (this.currentPage <= 3) {
            this.createP(1, 5)
        } else if (this.currentPage >= this.totalPage - 2) {
            this.createP(this.totalPage - 4, this.totalPage)
        } else {
            this.createP(this.currentPage - 2, this.currentPage + 2)
        }
    }
}
Page.prototype.setStyle = function (ele, styleObj) {
    for (var attr in styleObj) {
        ele.style[attr] = styleObj[attr]
    }
}
Page.prototype.createTag = function () {
    for (var attr in this.default.symbol) {
        var div = document.createElement('div')
        div.innerText = this.default.symbol[attr]
        if (attr !== 'list') {
            this.setStyle(div, {
                margin: "5px",
                padding: "5px",
                border: "1px solid #ccc"
            })
        } else {
            this.list = div
            this.setStyle(div, {
                display: "flex",
                justifyContent: "center",
                alignItems: "center"
            })
        }
        div.className = attr
        this.container.appendChild(div)
    }
}
Page.prototype.setDefault = function () {
    for (var attr in this.obj.pageData) {
        this.default.pageData[attr] = this.obj.pageData[attr]
    }
    for (var attr in this.obj.symbol) {
        this.default.symbol[attr] = this.obj.symbol[attr]
    }
}



// 加载层
var loadindex = layer.load(2, {
    shade: [0.8, "#fff"]
})
var pageSize = 5;
$.get('../php/list.php', res => {
    console.log(res)
    //加载数据
    var {
        meta: {
            status,
            msg
        },
        data
    } = res;

    if (status === 1) {
        new Page('fenye', {
            pageData: {
                total: data.length,
                pageSize,
            },
            show: function (currentPage) {
                var arr = data.slice((currentPage - 1) * pageSize, currentPage * pageSize);
                let str = '';
                for (let i = 0; i < arr.length; i++) {
                    str += `
                        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
                            <div class="thumbnail">
                                <img src="${arr[i].imgpath}" alt="...">
                                <div class="caption">
                                    <h3>¥${arr[i].price}</h3>
                                    <p>${arr[i].info}</p>
                                    <a href="#">${arr[i].shop}</a>
                                </div>
                            </div>
                        </div>
                        `
                }

                $('.fenye').html(str);
            }
        })
    };
    layer.close(loadindex);
}, 'json')